<template>
	<view class="latestanswerCard-page">
		<view class="latestanswerCard-page-content" @click="goquesdetails(latestanswerdata?.article?.id)">
			<view class="page-content-header">
				<span>{{latestanswerdata?.article?.title}}</span>
				<img v-if="index == 3" :src="queryIconImage('cardlogo2')" alt="" class="content-header-img">
				<img v-if="index == 4" :src="queryIconImage('cardlogo3')" alt="" class="content-heade-img-css">
			</view>
			<view class="page-content-nav">
				<view class="content-nav-left">
					<view class="nav-left-img">
						<img :src="queryIconImage('modelone1')" alt="" class="nav-left-imgss">
					</view>
					<span>{{latestanswerdata?.user?.nickname}}</span>
				</view>
				<view class="content-nav-right">
					<span>{{latestanswerdata.created_at}}</span>
				</view>
			</view>
			<view class="page-content-body" v-if="latestanswerdata.content">
				<span>{{latestanswerdata.content}}</span>
			</view>
			<!-- <view class="page-content-bodytwo" v-if="latestanswerdata.video">
				<video :src="latestanswerdata.video" class="content-bodytwo-img" :show-center-play-btn='true'
					:show-play-btn="true"></video>
			</view> -->
			<view class="page-content-bodydown">
				<view class="content-bodydown-left">
					<span v-for="(v,i) in latestanswerdata.article?.article_comment"
						:key="v.id">{{v?.user?.nickname}},</span>
				</view>
				<view class="content-bodydown-right">
					<span>等答主 也发表了{{latestanswerdata.article?.article_comment?.length}}个回答</span>
				</view>
			</view>
			<view class="page-content-bottom">
				<view class="content-bottom-like">
					<img :src="commentIconImage('likelogo1')" alt="" class="bottom-like-img">
					<span>{{latestanswerdata.zanlink}}</span>
				</view>
				<view class="content-bottom-comment">
					<img :src="commentIconImage('commentlogo1')" alt="" class="bottom-comment-img">
					<span>评论</span>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		name: "latestanswerCard",
		props: {
			latestanswerdata: {
				type: Object,
				default: () => {}
			},
			index: {
				type: Number,
			}
		},
		data() {
			return {

			};
		},
		computed: {
			...mapState({
				headericon: state => state.remote?.headericon?.data_list ?? [],
				iconList: state => state.remote?.iconList?.data_list ?? [],
			})
		},
		methods: {
			queryIconImage(label, key = "headericon") {
				return this[key]?.find(res => res?.label == label)?.img?.url;
			},
			commentIconImage(label, key = "iconList") {
				return this[key]?.find(res => res?.label == label)?.img?.url;
			},
			goquesdetails(id) {
				this.$emit('lategodetails', id)

			}
		}
	}
</script>

<style lang="scss">
	.latestanswerCard-page {
		width: 100%;
		box-sizing: border-box;
		border-radius: 15rpx 15rpx 15rpx 15rpx;
		padding: 20rpx;
		background-color: #fff;
		margin-bottom: 30rpx;

		.latestanswerCard-page-content {
			width: 100%;

			.page-content-header {
				font-size: 30rpx;
				font-family: Alibaba PuHuiTi 2.0-65 Medium, Alibaba PuHuiTi 20;
				font-weight: 500;
				color: #4A4A4A;
				line-height: 32rpx;

				.content-header-img {
					width: 32rpx;
					height: 32rpx;
					margin-left: 10rpx;
					vertical-align: top;
				}
					
				.content-heade-img-css{
					width: 32rpx;
					height: 32rpx;
					margin-left: 10rpx;
					vertical-align: top;
				}
			}

			.page-content-nav {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin: 15rpx 0;

				.content-nav-left {
					font-size: 26rpx;
					font-family: Source Han Sans CN-Bold, Source Han Sans CN;
					font-weight: 700;
					color: #777777;
					line-height: 42rpx;
					display: flex;
					align-items: center;

					.nav-left-img {
						display: flex;
						justify-content: center;
						align-items: center;
						width: 50rpx;
						height: 50rpx;
						border-radius: 50%;
						overflow: hidden;
						margin-right: 15rpx;

						.nav-left-imgss {
							width: 50rpx;
							height: 50rpx;
						}
					}
				}

				.content-nav-right {
					font-size: 20rpx;
					font-family: Source Han Sans CN-Regular, Source Han Sans CN;
					font-weight: 400;
					color: #999999;
					line-height: 45rpx;
				}
			}

			.page-content-body {
				font-size: 30rpx;
				font-family: Source Han Sans CN-Regular, Source Han Sans CN;
				font-weight: 400;
				color: #999999;
				line-height: 42rpx;
				margin-bottom: 32rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 3;
				-webkit-box-orient: vertical;
			}

			.page-content-bodytwo {
				width: 100%;
				height: 300rpx;

				.content-bodytwo-img {
					width: 100%;
					height: 300rpx;
				}
			}

			.page-content-bodydown {
				width: 100%;
				display: flex;
				justify-content: space-between;
				font-size: 20rpx;
				font-family: Source Han Sans CN-Bold, Source Han Sans CN;
				font-weight: 700;
				color: #9E9E9E;
				line-height: 42rpx;

				.content-bodydown-left {
					width: 60%;

					overflow: hidden; // 表示当内容溢出元素框时内容会被修剪，并且其余内容是不可见的。
					text-overflow: ellipsis; // 表示当文本溢出包含元素时发生的事情显示省略符号来代表被修剪的文本。
					white-space: nowrap;
				}

				.content-bodydown-right {
					width: 38%;
				}
			}

			.page-content-bottom {
				width: 100%;
				display: flex;
				margin: 15rpx 0;

				.content-bottom-like {
					font-size: 18rpx;
					font-family: Source Han Sans CN-Regular, Source Han Sans CN;
					font-weight: 400;
					color: #999999;
					line-height: 26rpx;
					display: flex;
					align-items: center;
					margin-right: 25rpx;

					.bottom-like-img {
						width: 24rpx;
						height: 24rpx;
						margin-right: 10rpx;
					}
				}

				.content-bottom-comment {
					font-size: 18rpx;
					font-family: Source Han Sans CN-Regular, Source Han Sans CN;
					font-weight: 400;
					color: #999999;
					line-height: 26rpx;
					display: flex;
					align-items: center;

					.bottom-comment-img {
						width: 24rpx;
						height: 24rpx;
						margin-right: 10rpx;
					}
				}
			}
		}
	}
</style>